/**
 * Created by wei on 17/10/25.
 */
import React, { Component } from 'react';
import axios from 'axios';
import base from '../base.js';
import cookie from '../cookie.js';
import Publish from './publish.js';
import PropTypes from 'prop-types';
import LoginForm from './login.js';
import RegisterForm from './register.js';
import "../main.css";

const basePath = base().basePath;



class Header extends Component{

    constructor(props){
        super(props);

        this.state = {
            login_visible: false,
            register_visible: false,
            userId:'',
            nickname:'',
            avatar:'',
            publishVisible: false,
            hotClick: false,
            newClick: true,
            token:'',
            notify:false,
        }

        this.showLogin = this.showLogin.bind(this);
        this.showRegister = this.showRegister.bind(this);
        this.logout = this.logout.bind(this);
    }

    componentDidMount(){
        const {init} = this.props;

        var nickname = cookie.getCookie('nickname');
        var token = cookie.getCookie('token');
        var avatar = cookie.getCookie('avatar');
        if(init){
            this.setState({
                // register_visible:false,
                nickname:nickname,
                avatar:avatar,
                token:token,
                hotClick: false,
                newClick: false,
            });
        }else{
            this.setState({
                // register_visible:false,
                nickname:nickname,
                avatar:avatar,
                token:token,
            });
        }


        if('' !== token){
            var that = this;
            setInterval(function () {
                axios.get(basePath+"/information/h", {headers: { token: token }
                }).then(
                    (res) => {
                        if(res.data.result === 'true'){
                            that.setState({
                                notify: true,
                            });
                        }else{
                            that.setState({
                                notify: false,
                            });
                        }
                    }
                );
            },60000);

        }

    }


    showLogin(){
        this.setState({
            login_visible:true,
        });
    }

    showRegister(){
        this.setState({
            register_visible:true,
        });
    }

    fnClosePublish(flag){
        const {fnCallback} = this.props;
        this.setState({
            publishVisible: false,
            hotClick: false,
            newClick: true,
        });
        if(flag){
            fnCallback(basePath+"/topic/new");
        }

    }

    fnLoginHideDiv(){
        var nickname = cookie.getCookie('nickname');
        var token = cookie.getCookie('token');
        var avatar = cookie.getCookie('avatar');
        var userId = cookie.getCookie('userId');
        this.setState({
            login_visible:false,
            nickname:nickname,
            avatar:avatar,
            token:token,
        });
    }

    fnRegisterHideDiv(){
        var nickname = cookie.getCookie('nickname');
        var token = cookie.getCookie('token');
        var avatar = cookie.getCookie('avatar');
        this.setState({
            register_visible:false,
            nickname:nickname,
            avatar:avatar,
            token:token
        });
    }


    logout(){
        const {fnCallback} = this.props;
        cookie.delCookie('nickname');
        cookie.delCookie('token');
        cookie.delCookie('avatar');
        this.setState({
            nickname:'',
            avatar:'',
            token:''
        });
        var url = window.location.href;
        window.location.href = url;
    }

    publish(){
        this.setState({
            publishVisible:true,
        });
    }

    paramsGen(content){
        var json = {};
        json.token = this.state.token;
        json.content = content;
        return json;
    }

    clickMenu(type){
        const {fnCallback} = this.props;
        if(type == 'hot'){
            this.setState({
                hotClick: true,
                newClick: false,
            });
            fnCallback(basePath+"/topic/hot");
        }else if(type == 'new'){
            this.setState({
                hotClick: false,
                newClick: true,
            });
            fnCallback(basePath+"/topic/new");
        }
    }

    showUserInfo(){
        if(this.state.nickname != '' && this.state.nickname != void(0)){

            let notify;
            if(this.state.notify){
                notify = (<div className="notify2"></div>);
            }

            return (
                <div style={{float:'left', height:'83px',width:'300px'}}>
                    <div style={{width:'80px', lineHeight:'80px',float:'left'}}>
                        <a href="#top" onClick={()=>this.publish()}>
                            <span>讲一个</span>
                        </a>
                    </div>

                    <Publish suspend={true} paramsGen={this.paramsGen.bind(this)}
                             url={basePath+"/topic/add"}
                             image={true}
                             visible={this.state.publishVisible}
                             close={this.fnClosePublish.bind(this)}/>

                    <div className="float_l loginHeader">
                        <div class="dropdown">
                            <div>
                                <div align="center" style={{width:'100%', height:'40px', paddingTop:'5px'}}>
                                    {notify}
                                    <a target="_blank" href={'/person.html#/?t='+this.state.token}>
                                        <img src={this.state.avatar} width={35} height={35}  />
                                    </a>
                                </div>
                                <div style={{width:'100%', height:'30px', lineHeight:2, textAlign:'center'}}>
                                    <a target="_blank" href={'/person.html#/?t='+this.state.token}>
                                        {this.state.nickname}
                                    </a>
                                </div>
                            </div>
                            <div class="dropdown-content" >
                                <a className="loginHeader_a" target="_blank" href={'/person.html#/?t='+this.state.token}><span>个人中心</span></a>
                                <a className="loginHeader_a" href="javascript:void(0);" onClick={()=>this.logout()}><span>退出登陆</span></a>
                            </div>
                        </div>
                    </div>
                </div>
            );
        }else{
            return (
                <div className="float_l loginHeader">
                    <a href="javascript:void(0);" onClick={()=>this.showLogin()} className="float_l loginHeader_a">
                        <h3>登陆</h3>
                    </a>
                    <a href="javascript:void(0);" onClick={()=>this.showRegister()} className="float_l loginHeader_a">
                        <h3>注册</h3>
                    </a>
                </div>
            );
        }
    }

    render(){
        return (
            <div className="head">
                <div style={{width:'85%', margin:'0 auto'}}>
                    <div style={{float:'left', width:'70%'}}>
                        {/*<a style={{float:'left'}}><img style={{height:'83px'}} src="/images/logo_h_y.png"/></a>*/}
                        <a style={{float:'left'}}><img style={{height:'83px'}} src="/images/logo_dog.png"/></a>
                        <a href="javascript:void(0);" onClick={()=>this.clickMenu('hot')} className={this.state.hotClick ? "title-select" : "title"}><h1>&nbsp;热门&nbsp;</h1></a>
                        <a href="javascript:void(0);" onClick={()=>this.clickMenu('new')} className={this.state.newClick ? "title-select" : "title"}><h1>&nbsp;最新&nbsp;</h1></a>
                    </div>
                    {this.showUserInfo()}

                </div>
                <LoginForm visible={this.state.login_visible} fnHideDiv={this.fnLoginHideDiv.bind(this)}/>
                <RegisterForm visible={this.state.register_visible} fnHideDiv={this.fnRegisterHideDiv.bind(this)}/>
            </div>
        );
    }

}

Header.propTypes = {
    fnCallback: PropTypes.func.isRequired,
    init: PropTypes.bool,
};

export default Header;